<template>
    <div class="messageCenter-wrapper">
        <IHeader class="header" back="true" title="消息中心"></IHeader>
        <list class="list" v-if="queryEnd">
            <cell class="cell flex_row" v-for="(item, index) in typeList" :key="index" @click="jumpTo(item.value)">
                <div>
                    <image class="cell-icon" :src="imgPath(iconList[index])"></image>
                    <div class="dot" v-if="messageList[index].isSee && messageList[index].isSee === '0'"></div>
                </div>
                <div class="message-content flex_row" :class="[index !== typeList.length - 1 ? 'border_bottom_ebebeb' : '']">
                    <div>
                        <text class="type">{{item.description}}</text>
                        <text class="message-word">{{messageList[index].content}}</text>
                    </div>
                    <image class="arrow_right" :src="imgPath('arrow_right_small.png')"></image>
                </div>
            </cell>
        </list>
        <!--loading-->
        <wxc-loading :show="loadingShow" :need-mask="needMask"></wxc-loading>
    </div>
</template>

<script>
import IHeader from '@/components/header'
import { WxcLoading } from 'weex-ui'
import { queryDist } from '@/api/common'
import { getMessageCenter, seeUserMessage } from '@/api/user'
// const modal = weex.requireModule('modal')

export default {
  name: 'messageCenter',
  data () {
    return {
      needMask: true, // 显示蒙版
      loadingShow: false, // loading
      iconList: ['system_message.png', 'business_message.png', 'task_message.png'], // 图标列表
      typeList: [], // 类型列表
      messageList: [], // 消息列表
      queryEnd: false, // 加载完
      length: 0, // 长度
      pageNo: 1,
      pageSize: 1
    }
  },
  mounted () {
    const that = this
    that.$api.get(queryDist + 'message_type', {}, (res) => {
      that.typeList = res.data
      that.queryData()
    })
  },
  methods: {
    queryData () { // 获取数据
      const that = this
      if (that.length >= that.typeList.length) {
        that.queryEnd = true
        return
      }
      let params = {
        pageNo: that.pageNo,
        pageSize: that.pageSize,
        moduleType: that.typeList[that.length].value
      }
      that.loadingShow = true
      that.$api.get(getMessageCenter, params, (res) => {
        that.loadingShow = false
        let obj = {}
        if (res.data.records.length <= 0) {
          obj.content = '暂无消息'
        } else {
          obj = res.data.records[0]
        }
        that.messageList.push(obj)
        that.length++
        that.queryData()
      }, () => {}, true)
    },
    jumpTo (val) {
      const that = this
      let path = ''
      let value = parseInt(val)
      if (value === 1) {
        path = '/message/systemMessage'
      } else if (value === 2) {
        path = '/message/businessMessage'
      } else if (value === 3) {
        path = '/message/taskMessage'
      }
      let params = {
        moduleType: val
      }
      that.$api.post(seeUserMessage, params, () => {
        that.$router.push(path)
      }, () => {}, true)
    }
  },
  components: {
    IHeader,
    WxcLoading
  }
}
</script>

<style scoped>
    .flex_row {
        flex-direction: row;
    }
    .border_bottom_ebebeb {
        border-bottom-width: 1px;
        border-bottom-style: solid;
        border-bottom-color: #ebebeb;
    }
    .list {
        height: 500px;
        margin-top: 88px;
    }
    .cell {
        padding-left: 24px;
        padding-right: 24px;
        align-items: center;
        /*justify-content: space-between;*/
    }
    .cell-icon {
        width: 68px;
        height: 68px;
    }
    .dot {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 14px;
        height: 14px;
        background-color: #ff0f37;
        border-radius: 7px;
    }
    .message-content {
        width: 610px;
        margin-left: 24px;
        padding-top: 24px;
        padding-bottom: 24px;
        align-items: center;
        justify-content: space-between;
    }
    .message-word {
        width: 510px;
        lines: 1;
        font-size: 26px;
        color: #868686;
        text-overflow: ellipsis;
    }
    .arrow_right {
        width: 36px;
        height: 36px;
    }
    .type {
        font-size: 32px;
        font-weight: bold;
        color: #464646;
    }
</style>
